<template>
	<md-field-group class="register_view">
		<van-nav-bar title="短信注册" left-text="返回" left-arrow @click-left="goback"/>
		<div>我们将发送验证码到您的手机</div>

		<md-field v-model="username" icon="manager-o" placeholder="请输入用户名" prop="name"/>

		<md-field v-model="password" icon="lock" placeholder="请输入密码" prop="passwords" :type="visiblePass ? 'text' : 'password'"
				  :right-icon="visiblePass ? 'eye-open' : 'eye-close'" @right-click="visiblePass = !visiblePass"/>

		<md-field v-model="repeatPassword" icon="lock" placeholder="请再次确认密码" prop="passwordRepeats" :type="visiblePass ? 'text' : 'password'"
				  :right-icon="visiblePass ? 'eye-open' : 'eye-close'" @right-click="visiblePass = !visiblePass"/>

		<md-field
				v-model="mobile"
				icon="mobile"
				placeholder="请输入手机号" prop="phones"/>


		<md-field v-model="code" icon="mobile" placeholder="请输入验证码" prop="code">
			<div slot="rightIcon" @click="getCode" class="getCode red">
				<countdown v-if="counting" :time="60000" @countdownend="countdownend">
					<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
				</countdown>
				<span v-else>获取验证码</span>
			</div>
		</md-field>


		<div class="register_submit_btn">
			<van-button type="danger" size="large" @click="registerSubmit">确定</van-button>
		</div>

		<!--<div class="register_submit">
			<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
		</div>-->

		<div class="register_footer">
			已有账号?
			<router-link to="/login" class="red">登录</router-link>
		</div>
	</md-field-group>
</template>

<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { NavBar } from 'vant';
import { authRegisterCaptcha,authRegister } from '@/api/api';

export default {
  data() {
	  return {
          visiblePass: false,
		  mobile: '',
      	  counting: false,
		  code: '',
		  password: '',
		  repeatPassword: '',
		  username: '',
          rules: {
              name: [{ validator: nameCheck, required: true, trigger: 'blur' } ],
              code: [ { validator: codeCheck, required: true, trigger: 'blur' } ],
              passwords: [{ validator: passwordsCheck, required: true, trigger: 'blur' }],
              passwordRepeats: [  { validator: passwordRepeatsCheck, required: true, trigger: 'blur' } ],
              phones: [  { validator: phoneCheck, required: true, trigger: 'blur' } ]
          },
	  };
      var nameCheck= (rule, value, callback) => {
          if (value === 0 || value === '') {
              this.$toast.fail("请输入用户名");
          } else {
              callback()
          }
      };
      var phoneCheck = (rule, value, callback) => {
          if (!(/^1(3|4|5|7|8)\d{9}$/.test(value))) {
              this.$toast.fail('请输入正确的手机号')
          } else {
              callback()
          }
      };
      var codeCheck = (rule, value, callback) => {
          if (value === 0 || value === '') {
              this.$toast.fail('请输入用户名')
          } else {
              callback()
          }
      };
      var passwordsCheck = (rule, value, callback) => {
          if (value === 0 || value === '') {
              this.$toast.fail('请输入密码')
          }else if (value.length <= 6){
              this.$toast.fail('密码必须大于6位数')
          } else {
              callback()
          }
      };
      var passwordRepeatsCheck = (rule, value, callback) => {
          if (value === 0 || value === '') {
              this.$toast.fail('请输入确认密码')
          }else if (value != this.passwordRepeat){
              this.$toast.fail('两次密码不一致')
          } else {
              callback()
          }
      }
  },
  methods: {
    submitCode() {
      this.$router.push({ name: 'registerSubmit' });
    },
    goback() {
      this.$router.go(-1);
    },
    registerSubmit() {
        let boody = this.getSave();
        //发送注册请求
        authRegister(boody).then(res => {
            this.$router.push({ name: 'login' });
        }).catch(error => {
            this.$toast.fail(error.data.errmsg);
            Toast.fail(error.data.errmsg);
        });
    },
    getSave() {
       const mobile = this.mobile;
        const username = this.username;
       const code = this.code;
       const password = this.repeatPassword;
       return {
           username: username,
           password: password,
           mobile: mobile,
           code: code
       };
    },
    getregCaptcha() {
        const mobile = this.mobile;
        return {
            mobile: mobile
        };
    },
    getCode() {
      this.counting = true;
      let boody = this.getregCaptcha();
      //发送短信请求
      authRegisterCaptcha(boody).then(res => {
          this.$toast.succes("短信已发送,请注意验收");
      }).catch(error => {
          this.$toast.fail(error.data.errmsg);
          Toast.fail(error.data.errmsg);
      });
    },
    countdownend() {
      this.counting = true;
    }
  },

  components: {
    [field.name]: field,
    [fieldGroup.name]: fieldGroup,
    [NavBar.name]: NavBar,
    [field.name]: field,
    [fieldGroup.name]: fieldGroup
  }
};
</script>

<style lang="scss" scoped>
div.register_view {
  background-color: #fff;
  padding-top: 30px;
}

div.register_submit {
  padding-top: 30px;
  padding-bottom: 20px;
}

.register_footer {
  text-align: right;
  color: $font-color-gray;
}
</style>

<style lang="scss" scoped>
	@import '../../../assets/scss/mixin';

	.register_submit {
		padding-top: 40px;
		background-color: #fff;
	}

	.register_submit_btn {
		padding-top: 30px;
	}

	.getCode {
		@include one-border(left);
		text-align: center;
	}

	.time_down {
		color: $red;
	}
</style>
